<template>
  <icon-button name="save" class="ar-icon ar-icon__xs ar-icon--no-border" @click.enter="upload" />
</template>

<script>
import IconButton from './IconButton.vue';
import UploaderPropsMixin from '@/mixins/uploader-props'
import axios from 'axios'
import emitter from '@/router/bus';

export default {
  name: 'UpLoader',
  mixins: [UploaderPropsMixin],
  props: {
    record: { type: Object },
  },
  components: {
    IconButton
  },
  methods: {
    upload() {
      if (!this.record.url) {
        return
      }
      let base_url = "http://10.82.14.162:8000/audio/"
      console.log('record.url: ', this.record.url)

      emitter.emit('start-upload')

      const data = new FormData()
      data.append('audio', this.record.blob, `${this.filename}.wav`)
      data.append('content', 'content')
      console.log('audio:', data)

      const headers = Object.assign(this.headers, {})
      headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

      axios.post(base_url, data, { headers: headers }).then(resp => {
        emitter.emit('end-upload', { status: 'success', response: resp })
      }).catch(error => {
        emitter.emit('end-upload', { status: 'fail', response: error })
      })
    }
  }
}
</script>

<style lang="scss">
@import '../scss/icons';
</style>